package com.example.composemodifiterdemo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.graphics.*
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.dp

/**
 * @auth: njb
 * @date: 2022/12/26 10:37
 * @desc:
 */
class ImageSampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            image()
        }
    }

    @Preview
    @Composable
    fun image() {
        Column {
            val imageModifier = Modifier
                .size(150.dp)
                .border(BorderStroke(1.dp, Color.Black))
                .background(Color.Yellow)
            Row(modifier = Modifier.padding(all = 10.dp)) {
                //内容缩放,指定 contentScale 选项以剪裁或更改图片在其边界内的缩放方式。默认情况下，如果您未指定 contentScale 选项，系统将使用 ContentScale.Fit。
                //在以下示例中，Image 可组合项的尺寸限制为 150dp，并带有边框，且 Image 可组合项的背景设置为黄色，以展示下表中的不同 ContentScale 选项。
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.Fit,
                    modifier = imageModifier
                )
                Spacer(modifier = Modifier.width(10.dp))
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.Crop,
                    modifier = imageModifier
                )
                Spacer(modifier = Modifier.width(10.dp))
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.FillHeight,
                    modifier = imageModifier
                )
                Spacer(modifier = Modifier.width(10.dp))
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.FillWidth,
                    modifier = imageModifier
                )
                Spacer(modifier = Modifier.width(10.dp))
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.FillBounds,
                    modifier = imageModifier
                )
            }
            Row(modifier = Modifier.padding(all = 10.dp)) {
                //将 Image 可组合项裁剪为形状:如需使图片适应形状，请使用内置的 clip 修饰符。如需将图片剪裁成圆形，请使用 Modifier.clip(CircleShape)：
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.Inside,
                    modifier = imageModifier
                )
                Spacer(modifier = Modifier.width(10.dp))
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.None,
                    modifier = imageModifier
                )
                Spacer(modifier = Modifier.width(10.dp))
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .size(150.dp)
                        .clip(CircleShape)
                )
                Spacer(modifier = Modifier.width(10.dp))
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .size(150.dp)
                        .clip(RoundedCornerShape(16.dp))
                )
            }
            Row(modifier = Modifier.padding(all = 10.dp)) {
                //将 Image 可组合项裁剪为形状:
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = "Golden retriever in falling autumn leaves",
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .size(150.dp)
                        .clip(SquashedOval())
                )
                Spacer(modifier = Modifier.width(10.dp))
                val borderWidth = 4.dp
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .size(150.dp)
                        .border(
                            BorderStroke(borderWidth, Color.Yellow),
                            CircleShape
                        )
                        .padding(borderWidth)
                        .clip(CircleShape)
                )
                //如果您想要创建渐变边框，可以使用 Brush API 在图片周围绘制彩虹渐变边框：
                val rainbowColorsBrush = remember {
                    Brush.sweepGradient(
                        listOf(
                            Color(0xFF9575CD),
                            Color(0xFFBA68C8),
                            Color(0xFFE57373),
                            Color(0xFFFFB74D),
                            Color(0xFFFFF176),
                            Color(0xFFAED581),
                            Color(0xFF4DD0E1),
                            Color(0xFF9575CD)
                        )
                    )
                }
                Spacer(modifier = Modifier.width(10.dp))
                val borderWidth1 = 4.dp
                //为 Image 可组合项添加边框，一种常见的操作是结合使用 Modifier.border() 与 Modifier.clip() 在图片周围创建边框：
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .size(150.dp)
                        .border(
                            BorderStroke(borderWidth1, rainbowColorsBrush),
                            CircleShape
                        )
                        .padding(borderWidth1)
                        .clip(CircleShape)
                )

            }
            Row (modifier = Modifier.padding(all = 10.dp)){
                //对图片进行色调处理
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    colorFilter = ColorFilter.tint(Color.Yellow),
                    modifier = Modifier
                        .size(150.dp)
                )
                Spacer(modifier = Modifier.width(10.dp))
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken),
                    modifier = Modifier
                        .size(150.dp)
                )
                Spacer(modifier = Modifier.width(10.dp))
                //通过颜色矩阵应用图片滤镜
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) }),
                    modifier = Modifier
                        .size(150.dp)
                )

                val contrast = 2f // 0f..10f (1 should be default)
                val brightness = -180f // -255f..255f (0 should be default)
                val colorMatrix = floatArrayOf(
                    contrast, 0f, 0f, 0f, brightness,
                    0f, contrast, 0f, 0f, brightness,
                    0f, 0f, contrast, 0f, brightness,
                    0f, 0f, 0f, 1f, 0f
                )
                Spacer(modifier = Modifier.width(10.dp))
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix)),
                    modifier = Modifier
                        .size(150.dp)
                )
                //反转 Image 可组合项的颜色
                val colorMatrix1 = floatArrayOf(
                    -1f, 0f, 0f, 0f, 255f,
                    0f, -1f, 0f, 0f, 255f,
                    0f, 0f, -1f, 0f, 255f,
                    0f, 0f, 0f, 1f, 0f
                )
                Spacer(modifier = Modifier.width(10.dp))
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix1)),
                    modifier = Modifier
                        .size(150.dp)

                )
                Spacer(modifier = Modifier.width(10.dp))
                //对 Image 可组合项进行模糊处理
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .size(150.dp)
                        .blur(
                            radiusX = 10.dp,
                            radiusY = 10.dp,
                            edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp))
                        )
                )
                Spacer(modifier = Modifier.width(10.dp))
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(id = R.string.dog_content_description),
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .size(150.dp)
                        .blur(
                            radiusX = 10.dp,
                            radiusY = 10.dp,
                            edgeTreatment = BlurredEdgeTreatment.Unbounded
                        )
                        .clip(RoundedCornerShape(8.dp))
                )
            }
            //设置自定义宽高比
       /*     Image(
                painter = painterResource(id = R.mipmap.avatar),
                contentDescription = stringResource(id = R.string.dog_content_description),
                modifier = Modifier
                    .aspectRatio(16f / 9f)
            )*/
        }
    }

    class SquashedOval : Shape {
        override fun createOutline(
            size: androidx.compose.ui.geometry.Size,
            layoutDirection: androidx.compose.ui.unit.LayoutDirection,
            density: Density
        ): Outline {
            val path = Path().apply {
                // We create an Oval that starts at ¼ of the width, and ends at ¾ of the width of the container.
                addOval(
                    Rect(
                        left = size.width / 4f,
                        top = 0f,
                        right = size.width * 3 / 4f,
                        bottom = size.height
                    )
                )
            }
            return Outline.Generic(path = path)
        }
    }

}